<template>
    <div class="document content">
        <div class="list-search-bar-container">

            <div class="list-search-bar-container-input">
                <el-input placeholder="请输入内容" v-model="pgData.title" class="input-with-select" clearable="">
                    <el-button slot="append" class="append-btn" @click="searchHandler">搜索</el-button>
                </el-input>
            </div>

            <search-box v-model="pgData" :majorlist="majorlist" @search="searchHandler"></search-box>

            <el-tabs v-model="pgData.sortname" @tab-click="searchHandler">
                <el-tab-pane v-for="item in dataSort" :key="item.diccode" :name="item.diccode">
                    <div slot="label" v-czc="['投标方案库', '导航' , item.dicname , 0 ,`document-btn-${item.nodeid}`]">{{item.dicname}}</div>
                </el-tab-pane>
            </el-tabs>

            <div class="tag-right">
                <el-button type="primary" size="small" @click="openDialog" v-czc="['投标方案库', '点击按钮' , '上传文件' , 0 ,`document-btn-fileUpload`]">上传文件
                    轻松赚钱</el-button>
            </div>
        </div>

        <div class="body">
            <div class="list" v-loading="pageLoading">
                <div class="item" v-for="(item, index) in tableData" :key="index">
                    <list-item :data="item" shadow radius :similar="false"></list-item>
                </div>

                <empty-list v-if="!tableData.length">
                    <span>暂无数据</span>
                </empty-list>
            </div>

            <my-pagination ref="page" v-model="tableData" :action="`${$store.state.api.tbUrl}/document/list.json`" :loading.sync="pageLoading" :search="pgData"
                :afterQuery="pageAfterQuery">
            </my-pagination>
        </div>

        <el-dialog :visible.sync="dialogVisible" class="re-dialog" title="上传文件" width="500px">
            <form-page v-if="dialogVisible" :data="form" @cancle="dialogClose" @addSuccess="searchHandler"></form-page>
        </el-dialog>

        <guide-popconfirm
            name="guide-document"
            :list="guideList"
        ></guide-popconfirm>
    </div>
</template>

<script>
import {mapActions} from 'vuex';
import dialogWaitList from '@js/dialog-wait-list.js';

import {buildTdk} from '@config/tdk';
import CONFIG_PROJECT from '@config/project';

import GuidePopconfirm from '@/components/sys/guide-popconfirm/index.vue';
import SearchBox from './components/search-box.vue';
import EmptyList from '@components/sys/empty-list';
import formPage from './formPage.vue';

import ListItem from './components/list-item';

import appNode from '@js/app-node';

export default {
    head() {
        return buildTdk('document');
    },
    layout: 'client',
    components: {
        GuidePopconfirm,
        SearchBox,
        ListItem,
        EmptyList,
        formPage,
    },
    async asyncData(context) {
        let [dataList] = await Promise.all([
            appNode.ssrReq
                .call(context, `${context.store.state.api.tbUrl}/document/gettreetype.json`, {
                    toptype: 'tou_biao_fang_an', //正式
                    // toptype: 'tbfa',        //本地
                })
                .then((data) => data),
        ]);

        if (!dataList) {
            return {
                dataList: [],
                majorlist: [],
            };
        }
        let majorItemChildren = [],
            majorlist = [];

        dataList.forEach((item) => {
            if (item.diccode === 'industry') {
                majorItemChildren = item.children;
            }
        });

        majorlist = majorItemChildren.map((item) => (
            item
        //     {
        //     dicname: item.dicname,
        //     diccode: item.diccode,
        // }
        ));

        majorItemChildren.forEach((item, index) => {
            let diccode = [];

            if (item.children) {
                item.children.forEach((child, i) => {
                    diccode.push(child.diccode);
                });

                diccode = diccode.join(',');
            } else {
                diccode = item.diccode;
            }

            majorlist[index].diccode = diccode;
        });

        return {
            dataList,
            majorlist,
        };
    },
    data() {
        return {
            dataSort: [
                // {
                //     dicname: '综合排序',
                //     diccode: '0',
                // },
                {
                    dicname: '最新上传',
                    diccode: 'addtime',
                    nodeid: 'newUpload',
                },
                {
                    dicname: '热门下载',
                    diccode: 'downloadamount',
                    nodeid: 'hotDownload',
                },
            ],

            pgData: {
                tagids: this.getQuery('tagids') ? Number(this.getQuery('tagids')) : '',
                exttagids:'',   // industry行业， detail为空的放到tagids传过来，detail为ext的放到exttagids传过来
                doctypecode: this.getQuery('doctypecode') || '',
                location: '',
                level: '',
                range: '',
                pagesize: 15,
                sortname: 'addtime',
                title: '',
                toptype: 'tou_biao_fang_an', //正式
            },
            tableData: [],
            pageLoading: false,

            dialogVisible: false,
            form: {},

            guideList: [
                {
                    title: '选择需要的投标方案模板的选项',
                    placement: 'left',
                    btn: '下一步',
                    position: [0, 170],
                    size: [1190, 210],
                },
                {
                    title: '点击需要下载的投标方案模板，进去查看且下载',
                    placement: 'left',
                    btn: '开始使用吧',
                    position: [0,  450],
                    size: [1190, 370],
                },
            ],
        };
    },
    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        searchHandler() {
            this.$refs.page.queryData();
        },
        openDialog() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.dialogVisible = true;
            });
        },
        dialogClose() {
            this.dialogVisible = false;
        },
        pageAfterQuery() {
            this.setCzc(['投标方案库', '翻页', '文件列表', this.$refs.page.currentPage, 'document-page-fileList']);
        },
    },
    mounted() {
        // 获取服务权限次数
        this.queryStatisticData(arr => {
            var service = arr.filter(item => item.code === 'TBFAXZ'),
                remain = service[0].surplus;

            if (remain <= 0 || !remain) {
                // 没次数
                return;
            }

            // 在列队中注册-分享引导登录
            dialogWaitList.push(() => {
                this.$alert(`您有${remain}次下载投标方案模板的次数，点击下载只消耗1次`, '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                }).then(() => {                                    
                    dialogWaitList.next();
                });
            }, 4);
            
        });
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.document {
    .list-search-bar-container {
        margin: 12px 0;
    }

    .list-search-bar-container-input {
        width: 736px;
        margin: 0 auto;
        margin-top: 30px;

        ::v-deep .el-input__inner {
            background-color: #eff3ff;
        }
        ::v-deep .el-input-group__append {
            background-color: $primaryColor;
            color: white;
        }

        .append-btn {
            cursor: pointer;
        }
    }

    .tag-right {
        float: right;
        bottom: 58px;
    }
    .body {
        background-color: white;
        padding: 25px 20px;

        .list {
            margin-left: -10px;
            margin-right: -10px;
            min-height: 300px;

            &:after {
                content: '';
                display: block;
                clear: both;
            }
        }

        .item {
            float: left;
            padding: 0 10px;
            width: 20%;
            margin-bottom: 20px;
        }
    }
    .re-dialog {
        ::v-deep {
            .el-dialog__header {
                padding: 20px 20px 20px 30px;
            }

            .el-dialog__body {
                padding: 10px 30px;
            }
        }
        ::v-deep {
            .el-dialog {
                border-radius: 6px;
                overflow: hidden;
            }
            .el-dialog__header {
                font-weight: bold;
                .el-dialog__headerbtn {
                    z-index: 10;
                }
            }
        }
    }
}
</style>
